<template>
    <div class="main-container">
        <div class="title">
            <h2>{{words.title}}</h2>
            <router-link :to="{path:'/article-mng',query:{columnId:article.columnId}}" class="pull-right">返回文章管理>></router-link>
        </div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="文章标题:">
                <el-input v-model="article.title"></el-input>
            </el-form-item>
            <el-form-item label="所属栏目:">
                <select-tree ref="iSelectTree"
                    v-model="article.columnId"
                    :data="columnTreeData"
                    :props="{label: 'name', children: 'children', nodeKey: '_id'}">
                </select-tree>
            </el-form-item>
            <el-form-item label="文章内容:">
                <ueditor v-model="article.content"></ueditor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSubmit">{{words.btn}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import ueditor from '../components/ueditor.vue';
export default {
    components: {
        ueditor
    },
    mounted() {
        this.init();
    },
    data() {
        return {
            // 编辑页面有这个值
            articleId: '',
            article: {
                title: '',
                content: '',
                author: '',
                columnId: ''
            },
            columnTreeData: [],
            pageType: 'add'
        };
    },
    computed: {
        words() {
            return this.pageType === 'edit' ? {
                title: '编辑文章',
                btn: '保存'
            } : {
                title: '新增文章',
                btn: '增加'
            }
        }
    },
    methods: {
        init() {
            /**
             * 此页面处理两类内容
             * 1 编辑文章，传入articleId
             * 2 新增文章，如果传入columnId，则初始化下拉树
             */
            let {columnId, articleId} = this.$route.query;
            this.getColumnTree().done(() => {
                this.article.columnId = this.$route.query.columnId;
            });
            if (articleId) {
                this.pageType = 'edit';
                this.getArticleById(articleId);
            }
        },
        initUeditor() {
            let p1 = new Promise((resolve, reject) => {
                loadJS('/asset/ueditor/ueditor.config.js', resolve);
            });
            let p2 = new Promise((resolve, reject) => {
                loadJS('/asset/ueditor/ueditor.all.js', resolve);
            });
            Promise.all([p1, p2]).then(vals => {
                var ue = window.UE.getEditor('ue-container', {
                    initialFrameWidth: '100%',
                    initialFrameHeight: 600
                });
                ue.ready(function() {
                    ue.setContent('');
                    var html = ue.getContent();
                    var txt = ue.getContentTxt();
                });
            })
        },
        getColumnTree() {
            return $.request('/api/getColumnTree').then(res => {
                this.columnTreeData = res.data;
            });
        },
        getArticleById(articleId) {
            return $.request('/api/getArticleById', {
                data: {id: articleId}
            }).then(res => {
                $.extend(this.article, res.data);
            });
        },
        handleSubmit() {
            let funcName = {
                add: 'addArticle',
                edit: 'updateArticle'
            }
            this[funcName[this.pageType]]();
        },
        // 新增文章
        addArticle() {
            $.request('/api/addArticle', {
                data: this.article,
                method: 'post'
            }).then((res) => {
                this.$confirm('增加文章成功！你可以选择继续添加或者返回文章列表', '提示', {
                    confirmButtonText: '返回列表',
                    cancelButtonText: '继续添加',
                    type: 'success'
                }).then(() => {
                    this.$router.push('article-mng')
                }).catch(() => {
                    this.resetColumn();
                });
            });
        },
        // 更新文章
        updateArticle() {
            $.request('/api/updateArticle', {
                data: this.article,
                method: 'post'
            }).then((res) => {
                this.$message({message: '保存成功', type: 'success'});
            });
        },
        resetArticle() {
            this.article = {
                title: '',
                content: '',
                author: '',
                columnId: ''
            }
        }
    }
}
</script>
<style lang="less">
</style>
